<template>
	<view class="container">
		<image :src="imgData" class="img"> </image>
		<view class="contact"
		@touchstart="onTouchStart"
		@touchmove="onTouchMove"
		@touchend="onTouchEnd"
		:style="'position: relative; top: ' + top + 'rpx;'"
		>
			<!-- <view class="text">识别结果</view>
			<view class="cls">
				<view class="text1"><text>属于</text></view>
				<view class="text2"><text>类型</text></view>
				<view class="text3"><text>可能性</text></view>
			</view>
			<view class="cls" v-for="(item,index) in identify" :class="item.styleClass">
				<view class="text1"><text>{{item.object}}</text></view>
				<view class="text2"><text>{{item.category}}</text></view>
				<view class="text3"><text>{{item.probability}}%</text></view>
			</view> -->
			<view class="line"></view>
			<view class="cont">
				<view class="cont1">
					<view v-for="(item,index) in identify" class="tit"  :class="{ 'selected': selectedIndex === index }" @click="selected(index)">
						<text class="txt1"></text>
						<text class="txt2"></text>
					</view>
				</view>
				<view v-for="(item,index) in newData" class="tit-body">
					<view class="tit-head">
						<text class="title" :class="item.styleClass"></text>
						<text class="type"  :class="item.styleClass"></text>
					</view>
					<text>各种物品的介绍</text>
				</view>
				<text></text>
			</view>
		</view>
		
	</view>
</template>

<script>
	
export default {
	
	data() {
		return {
			imgData:'',//拍照传过来的临时图片
			identify:'',//请求后端识别后传过来的数据
			top: -150, // 初始化 top 
			startY: 0, //滑动
			selectedIndex: 0,//选择三个选项中的其中一个
			newData:[], //选择后显示相应的信息
			
		}; 
	},
	
	onLoad(option){
		console.log(option);
	  this.imgData = JSON.parse(decodeURIComponent(option.img));
		console.log(this.imgData);
	},
	onShow() {
	  
		uni.uploadFile({
			url: 'http://43.136.172.73/api/v1/local/recognition/image', // 服务器接口地址
			filePath: this.imgData, // 图片文件路径
			name: 'image', // 后端接收文件的字段名
			  success: (res) => {
					// 上传成功的处理逻辑
					console.log(res);
					const decodedData = JSON.parse(res.data);
					console.log(decodedData);
					this.identify = decodedData;
					for(let i=0;i<5;i++){
						const roundedNumber = this.identify[i].probability.toFixed(2);
						this.identify[i].probability = parseFloat(roundedNumber);
					};
					this.identify.splice(this.identify.length - 2, 2);
					this.newData = [ ...this.identify[0] ];
					const styleClasses = ['item-one', 'item-two', 'item-three', 'item-four','item-four'];
					this.identify.map((item, index) => {
					  item.styleClass = styleClasses[index];
					});
					
			  },
			  fail: (err) => {
			  // 上传失败的处理逻辑
			  console.error(err);
			  }
			}); 
	},
	onReady() {
		// 将350rpx转换为像素值
		// const top = uni.upx2px(200); 
		// 将滚动条滚动到指定位置
		// uni.pageScrollTo({ scrollTop: top, duration: 0 }); 
	},
	methods: {
    onTouchStart(event) {
        this.startY = event.touches[0].clientY;
      },
      onTouchMove(event) {
        const touchY = event.touches[0].clientY;
         const deltaY = touchY - this.startY;
        
        if (deltaY > 0 && this.top < -150) {
          // 向下滑动
          this.top += deltaY * 0.6;
          this.top = Math.min(this.top, -150); // 限制 top 最大值为 -200
        } else if (deltaY < 0 && this.top > -900) {
          // 向上滑动
          this.top += deltaY * 0.6;
          this.top = Math.max(this.top, -900); // 限制 top 最小值为 -600
        }
         
        event.preventDefault();
      },
      onTouchEnd() {
        // 手指离开后的处理逻辑
      },
			selected(index){
				this.selectedIndex = index;
				this.newData = [ ...this.identify[index] ];
			}
	}
};
</script>
<style lang="scss" scoped>
	.container{
		background-color: #c9c9c9;
		height: 100vh;
		align-items: center;
		overflow: hidden;
	}
	.img{
		width: 750rpx;
		height: 100vh;
		border-radius: 10rpx;
		z-index: 1;
	}
	.contact{
		// margin: 40rpx;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		// border-radius: 50rpx 50rpx 0 0  ;
		// border: 5rpx solid #a9a9a9;
		
		position: relative;
		height: 900rpx;
		width: 750rpx;
		// top: -200rpx;
		z-index: 2;
		border-radius: 100rpx 100rpx 0 0;
		left: 0;
		transition: top 0.4s;
		background-color: #eaeaea;
		display: flex;
		justify-content: center;
		
		.line{
			width: 100rpx;
			height: 1rpx;
			border-radius: 10rpx;
			background-color: #d1d1d1;
			border: 4rpx solid #a6a6a6;
			margin-top: 20rpx;
		}
		
		.cont1{
			display: flex;
			justify-content: space-between;
			margin: 20rpx 2% 20rpx 2%;
			
			.tit{
				width: 32%;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				.txt1{
					font-size: 40rpx;
				}
				.txt2{
					font-size: 36rpx;
				}
			}
			
			
		}
		
		.tit-body{
			
			.tit-head{
				margin: 20rpx;
				
				.title{
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom:20rpx ;
				}
				.type{
					font-size: 37rpx;
					
				}
			}
		}
		
		.text{
			width: 100%;
			font-size: 40rpx;
			color: red;
			padding-left: 40%;
			padding-top: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 4rpx solid #939393;
		}
	}
	.cls{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0rpx 10rpx 0 10rpx;
		border-radius: 20rpx;
		.text1{
			width: 250rpx;
			font-size: 34rpx;
			margin: 10rpx;
		}
		.text2{
			width: 350rpx;
			margin: 10rpx;
		}
		.text3{
			width: 200rpx;
		}
		
	}
	.item-one{
		font-size: 42rpx;
		background-color: #ff4b4b;
	}
	.item-two{
		font-size: 40rpx;
		background-color: #4992ff;
	}
	.item-three{
		font-size: 38rpx;
		background-color: #55aa7f;
	}
	
</style>
